<template>
  <div id="app">
    <Header class="header"></Header>
    <router-view class="center"></router-view>
    <Footer class="footer"></Footer>
  </div>
</template>

<script>
import Header from '@/components/Header'
import Footer from "@/components/Footer"
import { mapState } from "vuex";
export default {
  name: 'App',
  data(){
    return{
      sort:null,
      sort_name:'',
    }
  },
  //全局组件
  components: {
    Header,
    Footer
  },
  mounted(){

  },
  methods:{
    
  },
  computed:{
    
  }
}
</script>

<style lang="less">
@import "./iocn/iconfont.css";
* {
    width: 100%;
    margin: 0px;
    padding: 0px;
    list-style: none;
    text-decoration: none;
}
html{
  height: 100%;
}
body{
  height: 100%; 
}
#app{
    max-width: 100%;
    height: 100%;
    min-width: 1000px;
    // 上中下布局(流式布局)
    display: flex;
    flex-direction: column;
    .header{
      flex: 0 0 auto;
    }
    .center{
      flex: 1 0 auto;
    }
    .footer{
      flex: 0 0 auto;
    }
    
}
.center {
  display: flex;
  width: 1000px;
  margin: 0 auto;
  flex-wrap: wrap;
}
</style>
